<template>
	<div class="wrap">
		<h2>
			<span>{{ name }}</span>
			-
			<span class="count"> {{ counterStore.count }} </span>
			-
			<span>{{ route.path }}</span>
		</h2>
		<div>
			<el-button
				type="primary"
				size="small"
				@click="counterStore.count = 0"
				>重置 count</el-button
			>
		</div>

		<router-link
			v-for="route in routerList"
			:key="route.path"
			:to="route.path"
		>
			<el-button
				link
				:type="route.type"
				>{{ route.text }}</el-button
			>
		</router-link>

		<router-view />
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useCounterStore } from "@/store/index.js";
	import { useRouter, useRoute } from "vue-router";

	const routerList = [
		{ path: "/home", type: "primary", text: "home" },
		{ path: "/testPinia", type: "primary", text: "testPinia" },
		{ path: "/invokeRust", type: "primary", text: "invokeRust" }
	];

	const name = ref("App");
	const counterStore = useCounterStore();
	const route = useRoute();
</script>

<style lang="scss">
	.wrap {
		padding: 10px;
		.count {
			color: red;
		}
	}
</style>
